<template>
  <div class="login-container">
    <svg-icon icon-class="loginBg" width="100%" height="40vh" class="icon"/>
    <div class="login-content">
      <!-- 头部导航 -->
      <van-nav-bar title="L O G I N" class="page-nav-bar">
      </van-nav-bar>

      <!-- 登录注册 -->
      <van-form @submit="onSubmit" ref="loginForm">
        <!-- 用户名 -->
        <van-field
          v-model="userinfo.username"
          name="username"
          label="用户名"
          placeholder="1-10个字符"
        >
          <template #left-icon>
            <svg-icon icon-class="xin-qiqiu" width="20px" height="20px" class="icon"/>
          </template>
        </van-field>

        <!-- 密码 -->
        <van-field
          v-model="userinfo.password"
          name="password"
          label="密码"
          placeholder="6-12位数字、大小写字母"
        >
          <template #left-icon>
            <svg-icon icon-class="xin-yuechi" width="20px" height="20px" class="icon"/>
          </template>
        </van-field>

        <!-- 提交 -->
        <div style="margin: 28px;" class="button-wrap">
          <van-button block type="info" native-type="submit">submit</van-button>
        </div>
        <p class="bottom-text">No account？
          <span @click="$router.push({path: '/register'})">Create Account
            <svg-icon icon-class="xin-yinfu" width="20px" height="20px" class="icon"/>
          </span>
        </p>
      </van-form>
    </div>
  </div>
</template>

<script>

/* 验证码246810 */

import { userLoginAPI } from '../../api/index.js'
import SvgIcon from '@/components/svgIcon/index.vue'

export default {
  name: 'LoginIndex',
  data () {
    return {
      userinfo: {
        username: '',
        password: ''
      }
    }
  },
  components: {
    SvgIcon
  },
  methods: {
    async onSubmit () {
      try {
        // 通过加载提示来阻止用户高频的请求点击
        this.$toast.loading({
          duration: 0, // 持续显示加载提示，直到触发成功或失败才会关闭
          message: '登录中...', // 提示内容
          forbidClick: true // 是否禁用背景点击
        })
        const res = await userLoginAPI({
          username: this.userinfo.username,
          password: this.userinfo.password
        })
        if (this.userinfo.username === '' || this.userinfo.password === '') {
          return this.$toast.fail('用户名或密码不能为空')
        }
        if (res.data.status === 1) {
          return this.$toast.fail(`${res.data.message}`)
        }
        console.log(res)
        this.$store.commit('setUser', res.data.token)
        this.$toast.success(`${res.data.message}`)
        await this.$router.push({
          path: '/layout/home'
        })
      } catch (error) {
        console.log(error)
        // 通过不同的响应代码来判断提示错误的内容
        if (error.data && error.data.response === 404) {
          return this.$toast.fail('用户名或密码错误')
        } else {
          return this.$toast.fail('网络异常，请稍后重试')
        }
      }
    }

  }
}
</script>

<style scoped lang="less">
.login-container {
  height: 100vh;
  background-color: #fff2e6;

  .login-content {
    height: 60vh;
    background-color: #fff;
    border-radius: 30px 30px 0 0;

    .smsBtn {
      color: #666666;
      background-color: #ededed;
      border: none;
    }

    .page-nav-bar {
      height: 80px;
      background-color: transparent;

    }

    .van-cell {
      height: 55px;
      align-items: center;
    }

    ::v-deep .page-nav-bar .van-nav-bar__title {
      color: #666666;
      font-size: 31px;
      font-weight: bolder;
      height: 40px;
      margin-top: 30px;
    }

    .button-wrap button {
      height: 50px;
      border-radius: 20px;
      border: none;
      background-color: #eaa49d;
      Letter-spacing: 3px;
      font-size: 18px;
    }

    .bottom-text {
      text-align: center;
      font-size: 14px;

      span {
        color: #a5cda8;
      }
    }
  }

}
</style>
